<template>
	<view >
		<view class="header" :style="{background: bgcolor, 'box-shadow': hasShadow ? '0 2px 4px 0 rgba(0,0,0,0.03)' : ''}"  >
			<image v-if="hasArrow" class="back" @click="handleBeforePage" src="https://images.linglinggong.net/icon1/20.png" mode="aspectFill"></image>
			<view class="title">{{ headerTitle }}</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data(){
			return{
				safeAreaInsets:''
			}
		},
		props: {
			//导航栏标题
			headerTitle: {
				type: String,
				default: '发布任务'	,
			},
			//导航栏标题
			bgcolor: {
				type: String,
				default: '#FFFFFF'	,
			},
			//是否带阴影
			hasShadow: {
				type: Boolean,
				default: true,
			},
			//是否有箭头
			hasArrow: {
				type: Boolean,
				default: true,
			},
			isFillin:{
				type:Boolean,
				default:false
			}
		},
		mounted(){
			this.safeAreaInsets  = uni.getSystemInfoSync().safeArea.top
	             console.log(this.safeAreaInsets,'安全区');
		},
		watch:{
			isFillin(n,l){
				this.isFillin = n
				console.log(this.isFillin,'新的');
			}
		},
		methods: {
			// 返回上一页
			handleBeforePage () {
				if(this.isFillin){
					this.isFillin = false
					this.$emit('changePage')
				}else{
                // 关闭当前页面，返回上一页面
				uni.navigateBack({  delta: 1 })
				console.log('关闭当前页面，返回上一页面')
				}
				
			},
		},
	}
</script>

<style lang="less" scoped>
.header {
	// border: 1px solid #000000;
	// box-shadow: 0 2px 4px 0 rgba(0,0,0,0.03);
	// position: fixed;
	// top: 0;
	z-index: 10;
	height: 182rpx;
	width: 100vw;
	display: flex;
	align-items: center;
	justify-content: center;
	
	& > .back {
		position: absolute;
		top:100rpx;
		left: 30rpx;
		width: 24upx;
		height: 42upx;
		
	}

	& > .title {
		text-align: center;
		font-size: 17px;
		color: #402110;
		font-family: PingFangSC-Regular;
		transform: translateY(35rpx);
	}
}
</style>
